import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import auth from '@/utils/directives';
import { ERROR_ICON, IMG_URL } from './utils/utils';
import moment from 'moment';
import WebSocketPlugin from '@/plugins/websocket';

Vue.use(ElementUI);
Vue.use(WebSocketPlugin); // 注册WebSocket插件
Vue.directive('auth', auth);
Vue.prototype.$moment = moment;

Vue.filter('filter_img',(src='')=>{
  if(!src){
    return ERROR_ICON;
  }
  if(src.includes('http')){
    return src;
  }else{
    return IMG_URL + src;
  }
})
Vue.directive('role', {
  // 生命周期(v-directive全局自定义指令的生命周期)
  // bind 只调用一次，指令第一次绑定到元素时候调用，用这个钩子可以定义一个绑定时执行一次的初始化动作。
  // inserted:被绑定的元素插入父节点的时候调用(父节点存在即可调用，不必存在document中)
  // update: 被绑定与元素所在模板更新时调用，而且无论绑定值是否有变化，通过比较更新前后的绑定值，忽略不必要的模板更新
  // componentUpdate :被绑定的元素所在模板完成一次更新更新周期的时候调用
  // unbind: 只调用一次，指令元素解绑的时候调用
  inserted: (el, binding, vnode) => {
    const { value, arg } = binding
    const permissions = JSON.parse(localStorage.getItem('permissions')) // 从Vuex获取当前用户权限
    if (value) {
      let requiredPerms;
      if (Array.isArray(value)) {
        requiredPerms = value
      } else {
        requiredPerms = [value]
      }
      const hasPermission = permissions.some(perm => requiredPerms.includes(perm))
      if (!hasPermission) {
        if (arg === 'disabled') {
          // 禁用元素
          el.disabled = true
          el.classList.add('is-disabled')
          el.setAttribute('title', '无权限操作')
        } else {
          // 默认行为：移除元素
          el.parentNode && el.parentNode.removeChild(el)
        }
      }
    } else {
      throw new Error(`需要指定权限，如 v-permission="'add'"`)
    }
  }
})

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
